<template>
  <div class="comment-tree">
    <div class="comment-content">
      <a-avatar :src="comment.avatar" :size="32">
        {{ !comment.avatar ? comment.username?.charAt(0).toUpperCase() : '' }}
      </a-avatar>
      <div class="comment-body">
        <div class="comment-info">
          <span class="username">{{ comment.username }}</span>
          <span class="comment-time">{{ comment.createTime }}</span>
        </div>
        <div class="comment-text" v-html="renderedContent"></div>
        <div class="comment-actions">
          <a @click="handleReply">回复</a>
          <!-- 如果有子评论，显示展开/收起按钮 -->
          <template v-if="hasChildren">
            <span class="action-divider">·</span>
            <a @click="toggleExpand">
              {{ isExpanded ? '收起回复' : '展开' + comment.children.length + '条回复' }}
            </a>
          </template>
        </div>
        
        <!-- 子评论 -->
        <div v-if="hasChildren && isExpanded" class="sub-comments">
          <div class="sub-comments-list">
            <comment-tree
              v-for="child in comment.children"
              :key="child.id"
              :comment="child"
              @reply="$emit('reply', $event)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { marked } from 'marked'
import hljs from 'highlight.js'
import DOMPurify from 'dompurify'

export default {
  name: 'CommentTree',
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isExpanded: false
    }
  },
  computed: {
    hasChildren() {
      return this.comment.children && this.comment.children.length > 0
    },
    renderedContent() {
      if (!this.comment.content) return ''
      marked.setOptions({
        highlight: function(code, lang) {
          if (lang && hljs.getLanguage(lang)) {
            try {
              return hljs.highlight(code, { language: lang }).value
            } catch (err) {}
          }
          return hljs.highlightAuto(code).value
        },
        breaks: true,
        gfm: true
      })
      return DOMPurify.sanitize(marked(this.comment.content))
    }
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    },
    handleReply() {
      this.$emit('reply', this.comment)
    }
  }
}
</script>

<style scoped>
.comment-tree {
  margin-bottom: 24px;
}

.comment-content {
  display: flex;
  gap: 12px;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-info {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}

.comment-time {
  font-size: 12px;
  color: #8c8c8c;
}

.comment-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin: 8px 0;
  word-break: break-word;
}

.comment-actions {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-divider {
  color: #d9d9d9;
}

.comment-actions a {
  color: #8c8c8c;
  cursor: pointer;
  transition: color 0.3s;
}

.comment-actions a:hover {
  color: #1890ff;
}

.sub-comments {
  margin-top: 16px;
  margin-left: 44px;
  position: relative;
}

.sub-comments::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #f0f0f0;
}

.sub-comments-list {
  position: relative;
}

/* 评论中的代码块样式 */
.comment-text :deep(pre) {
  margin: 8px 0;
  padding: 12px;
  background-color: #282c34;
  border-radius: 4px;
  overflow: auto;
}

.comment-text :deep(pre code) {
  padding: 0;
  background: none;
  color: #abb2bf;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 13px;
}

.comment-text :deep(code) {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 13px;
  padding: 2px 4px;
  background: #f6f8fa;
  border-radius: 3px;
  color: #476582;
}

:deep(.ant-avatar) {
  background-color: #1890ff;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 